<template>
    <Select @input="limitcount" v-model="selectModel" style="width:100%" multiple>
        <slot></slot>
    </Select>
</template>

<script>
export default {
  name: 'WlSelectMultiple',
  data () {
    return {
      selectModel: []
    }
  },
  props: {
    value: {
      type: String,
      default: () => {
        return ''
      }
    },
    tableData: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  mounted () {
    if (this.value !== '') {
      this.selectModel = this.$common.xeUtils.clone(this.value.split(','), true)
    }
  },
  methods: {
    aaa () {
      console.log('123')
    },
    selectAction (data) {
      this.$emit('change', data.join(','))
    },
    limitcount (e) {
      console.log(this.tableData)
      if (e.length > 3) {
        this.$Message.error({
          content: '每组属性最多可选3种规格！'
        })
        e.pop()
      }
    }
  },
  watch: {
    value (data) {
      this.selectModel = this.$common.xeUtils.clone(data.split(','), true)
    },
    selectModel (data) {
      this.$emit('change', data.join(','))
    }
  }
}
</script>

<style scoped>

</style>
